<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能天气查询</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="icon" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/cloud-sun.svg">
</head>

<body>
    <div id="backgroundOverlay"></div>
    <div id="modalOverlay" class="overlay"></div>
    <div class="container">
        <h1><i class="fas fa-cloud-sun"></i> 智能天气查询</h1>
        <div class="input-container">
            <div class="search-wrapper">
                <i class="fas fa-map-marker-alt location-icon"></i>
                <div class="input-wrapper">
                    <input type="text" id="cityInput" placeholder="" autocomplete="off" aria-label="城市搜索框">
                    <span class="placeholder-text">输入城市名称（如：广州、深圳）</span>
                </div>
                <button id="queryButton" aria-label="搜索">
                    <i class="fas fa-search"></i>
                </button>
            </div>
            <div class="suggestions-container"></div>
            <div class="history-wrapper">
                <button id="historyButton" class="history-button" aria-label="历史记录">
                    <i class="fas fa-history"></i>
                </button>
                <div id="historyDropdown" class="history-dropdown">
                    <div class="history-header">
                        <span><i class="fas fa-clock"></i> 历史记录</span>
                        <button id="clearHistory" class="clear-history" aria-label="清空历史">
                            <i class="fas fa-trash-alt"></i>
                        </button>
                    </div>
                    <div id="historyList" class="history-list"></div>
                </div>
            </div>
        </div>
        <div id="weatherResult" class="weather-result">
            <div class="initial-message">
                <i class="fas fa-cloud-sun-rain"></i>
                <p>输入城市名称开始查询天气</p>
            </div>
        </div>
        <footer class="footer">
            <div class="api-info">
                <small>数据来源:OpenWeather API</small>
            </div>
            <div class="update-time" id="updateTime"></div>
        </footer>
    </div>
    <!-- <script src="./scriptzheng.js"></script> -->
    <script src="script.js"></script>
</body>

</html>